<template>
  <div class="app-container">
    <el-select v-model="device.name" placeholder="请选择" @change="where">
      <el-option @click="all">全部产品</el-option>
      <el-option
        v-for="item in device"
        :key="item"
        :label="item.name"
        :value="item.name"
      >
      </el-option>
    </el-select>
    <br />
    <br />
    <br />
    <el-button
      icon="el-icon-circle-plus-outline"
      type="primary"
      @click="addDevice()"
      >添加设备</el-button
    >
    <el-table
      :data="deviceList"
      stripe
      style="width: 100%"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column prop="name" label="设备名称"> </el-table-column>
      <el-table-column prop="pname" label="所属产品"> </el-table-column>
      <el-table-column prop="deviceKey" label="key"> </el-table-column>
      <el-table-column prop="active" label="激活状态">
        <template slot-scope="scope">
          {{ scope.row.active == 2 ? "激活" : "未激活" }}
        </template>
      </el-table-column>
      <el-table-column prop="typeName" label="开/关设备"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column label="详情">
        <template slot-scope="scope">
          <el-button @click="xq(scope.row)" size="mini">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="290px">
        <template slot-scope="scope">
          <el-button
            @click="
              send(scope.row);
              dialogsend = true;
            "
            icon="el-icon-edit"
            type="primary"
            size="mini"
            >发送指令</el-button
          >
          <el-button
            @click="updateDev(scope.row)"
            icon="el-icon-edit"
            type="primary"
            size="mini"
            >修改</el-button
          >
          <el-button
            @click="deleteDev(scope.row.id)"
            icon="el-icon-delete"
            type="danger"
            size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 设备详情弹出层 -->

    <el-dialog
      title="设备详情"
      :visible.sync="dialogVisibleXQ"
      width="80%"
      :before-close="handleClose"
    >
      <el-descriptions
        :title="xqlist.name"
        direction="vertical"
        :column="4"
        border
      >
        <el-descriptions-item label="产品">{{
          xqlist.pname
        }}</el-descriptions-item>
        <el-descriptions-item label="设备类型">{{
          xqlist.typeName
        }}</el-descriptions-item>
        <el-descriptions-item label="deviceKey" :span="2">{{
          xqlist.deviceKey
        }}</el-descriptions-item>
        <el-descriptions-item label="deviceSecret">
          {{ xqlist.deviceSecret }}
        </el-descriptions-item>
        <el-descriptions-item label="在线状态">{{
          xqlist.active == 1 ? "离线" : "在线"
        }}</el-descriptions-item>
      </el-descriptions>
      <h2>topic列表</h2>
      <el-descriptions
        v-for="(item, index) in xqlist.topic"
        :key="index"
        border
      >
        <el-descriptions-item>{{ item.topic }}</el-descriptions-item>
      </el-descriptions>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleXQ = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加设备 -->
    <el-dialog title="添加设备" :visible.sync="dialogFormVisible">
      <el-form :model="device1">
        <el-form-item label="产品">
          <el-select v-model="device1.productId" placeholder="请选择产品">
            <el-option
              v-for="item in productList"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="device1.deviceTypeId" placeholder="请选择类型">
            <el-option
              v-for="item in typeList"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-input v-model="device1.deviceIndex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父设备">
          <el-input v-model="device1.parentId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="device1.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改设备 -->
    <el-dialog title="修改设备" :visible.sync="dialogtwo">
      <el-form :model="device1">
        <el-form-item label="设备名称">
          <el-input v-model="device1.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备编号" :label-width="formLabelWidth">
          <el-input v-model="device1.deviceIndex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父设备" :label-width="formLabelWidth">
          <el-input v-model="device1.parentId" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogtwo = false">取 消</el-button>
        <el-button type="primary" @click="updateDevice()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 发送指令弹窗 -->
    <el-dialog title="发送指令" :visible.sync="dialogsend">
      <el-form>
        <el-form-item label="设备key">
          <el-input
            v-model="cmddto.deviceKey"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="传感器">
          <el-select v-model="cmddto.deviceSubCode" placeholder="请选择">
            <el-option label="大棚" value="0"></el-option>
            <el-option label="抽风" value="1"></el-option>
            <el-option label="灌溉" value="2"></el-option>
            <el-option label="照明" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="指令值">
          <el-select v-model="cmddto.value" placeholder="请选择">
            <el-option label="开" value="0"></el-option>
            <el-option label="关" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogsend = false;
            cmddto = {};
          "
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="
            tosend();
            dialogsend = false;
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagedto.now"
      :page-sizes="[5, 10, 50, 100]"
      :page-size="pagedto.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import {
  page,
  addDevice,
  updateDevice,
  deleteDevice,
  selectType,
  send,
} from "@/api/device";
import { selectAll } from "@/api/product";
export default {
  data() {
    return {
      //发送指令
      dialogsend: false,
      cmddto: {
        deviceKey: "",
        deviceSubCode: "",
        cmdName: "",
        value: "",
      },
      //详情
      dialogVisibleXQ: false,
      xqlist: [],
      loading: true,
      deviceList: [
        {
          name: "",
          pname: "",
          deviceKey: "",
          active: "",
          typeName: "",
          createTime: "",
        },
      ],
      device: {
        name: "",
      },
      dialogFormVisible: false,
      dialogtwo: false,
      device1: {},
      pagedto: {
        now: 1,
        size: 5,
        where: {
          name: "",
        },
      },
      total: "",
      productList: [],
      typeList: [],
    };
  },
  methods: {
    handleSizeChange(size) {
      this.pagedto.size = size;
      this.search();
    },
    handleCurrentChange(now) {
      this.pagedto.now = now;
      this.search();
    },
    search() {
      page(this.pagedto).then((res) => {
        this.deviceList = res.list;
        this.device = res.list;
        // console.log(this.device);
        this.total = res.total;
        this.loading = false;
      });
    },
    where() {
      this.pagedto.where.name = this.device.name;
      page(this.pagedto).then((res) => {
        this.deviceList = res.list;
      });
    },
    all() {
      this.search();
    },
    addDevice() {
      this.device1 = {};
      this.dialogFormVisible = true;
    },
    add() {
      console.log(this.device1);
      addDevice(this.device1).then((res) => {
        this.dialogFormVisible = false;
        if (res.code == 200) {
          this.search();
        }
        this.$message({
          message: res.ok ? "添加成功" : "添加失败",
          type: res.code == 200 ? "success" : "error",
        });
      });
    },
    updateDevice() {
      updateDevice(this.device1).then((res) => {
        this.dialogtwo = false;
        if (res.code == 200) {
          this.search();
        }
        this.$message({
          message: res.ok ? "修改成功" : "修改失败",
          type: res.code == 200 ? "success" : "error",
        });
      });
    },
    deleteDev(id) {
      this.$confirm("此操作将永久删除该设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteDevice(id).then((res) => {
          if (res.code == 200) {
            this.search();
          }
          this.$message({
            message: res.ok ? "删除成功" : "删除失败",
            type: res.code == 200 ? "success" : "error",
          });
        });
      });
    },
    updateDev(row) {
      this.device1 = row;
      this.dialogtwo = true;
      console.log(row);
    },
    selectType() {
      selectType().then((res) => {
        this.typeList = res.data;
      });
    },
    selectAll() {
      selectAll().then((res) => {
        this.productList = res.data;
      });
    },
    // 设备详情
    xq(data) {
      this.xqlist = data;
      this.dialogVisibleXQ = true;

      console.log(this.xqlist);
    },
    //发送指令
    send(data) {
      this.cmddto.deviceKey = data.deviceKey;
    },
    tosend() {
      this.cmddto.cmdName = "on_off";
      console.log(this.cmddto);
      send(this.cmddto).then((res) => {
        if (res.ok) {
          this.$message({
            type: res.ok ? "success" : "error",
            message: res.ok ? "success" : "error",
          });
        }
      }),
        (this.cmddto = {});
    },
  },
  created() {
    this.search();
    this.selectType();
    this.selectAll();
  },
};
</script>
